<!-- @format -->

<template>
  <view class="model-example">
    <view class="example-title">弹层组件示例</view>

    <!-- 基础用法 -->
    <view class="example-section">
      <view class="section-title">基础用法</view>
      <view class="button-row">
        <comp-button theme="primary" @click="showBasic"
          >显示基础弹窗</comp-button
        >
      </view>
      <comp-model v-model="basicVisible" title="基础弹窗">
        <view class="model-content">
          这是一个基础弹窗示例，点击遮罩层或关闭按钮可关闭弹窗。
        </view>
      </comp-model>
    </view>

    <!-- 不同位置 -->
    <view class="example-section">
      <view class="section-title">不同位置</view>
      <view class="button-row">
        <comp-button theme="primary" @click="showPosition('center')"
          >居中弹窗</comp-button
        >
        <comp-button theme="primary" @click="showPosition('top')"
          >顶部弹窗</comp-button
        >
        <comp-button theme="primary" @click="showPosition('bottom')"
          >底部弹窗</comp-button
        >
        <comp-button theme="primary" @click="showPosition('left')"
          >左侧弹窗</comp-button
        >
        <comp-button theme="primary" @click="showPosition('right')"
          >右侧弹窗</comp-button
        >
      </view>
      <comp-model
        v-model="positionVisible"
        :title="`${currentPosition}弹窗`"
        :position="currentPosition"
      >
        <view class="model-content">
          这是一个{{
            currentPosition === 'center'
              ? '居中'
              : currentPosition === 'top'
                ? '顶部'
                : currentPosition === 'bottom'
                  ? '底部'
                  : currentPosition === 'left'
                    ? '左侧'
                    : '右侧'
          }}弹窗示例。
        </view>
      </comp-model>
    </view>

    <!-- 不同尺寸 -->
    <view class="example-section">
      <view class="section-title">不同尺寸</view>
      <view class="button-row">
        <comp-button theme="primary" @click="showSize('small')"
          >小型弹窗</comp-button
        >
        <comp-button theme="primary" @click="showSize('medium')"
          >中型弹窗</comp-button
        >
        <comp-button theme="primary" @click="showSize('large')"
          >大型弹窗</comp-button
        >
      </view>
      <comp-model
        v-model="sizeVisible"
        :title="`${currentSize}弹窗`"
        :size="currentSize"
      >
        <view class="model-content">
          这是一个{{
            currentSize === 'small'
              ? '小型'
              : currentSize === 'medium'
                ? '中型'
                : '大型'
          }}弹窗示例。
        </view>
      </comp-model>
    </view>

    <!-- 自定义宽高 -->
    <view class="example-section">
      <view class="section-title">自定义宽高</view>
      <view class="button-row">
        <comp-button theme="primary" @click="showCustomSize"
          >自定义宽高弹窗</comp-button
        >
      </view>
      <comp-model
        v-model="customSizeVisible"
        title="自定义宽高"
        width="70%"
        height="300rpx"
      >
        <view class="model-content">
          这是一个自定义宽高的弹窗示例，宽度为70%，高度为300rpx。
        </view>
      </comp-model>
    </view>

    <!-- 全屏弹窗 -->
    <view class="example-section">
      <view class="section-title">全屏弹窗</view>
      <view class="button-row">
        <comp-button theme="primary" @click="showFullscreen"
          >显示全屏弹窗</comp-button
        >
      </view>
      <comp-model v-model="fullscreenVisible" title="全屏弹窗" fullscreen>
        <view class="model-content">
          这是一个全屏弹窗示例，占满整个屏幕。
        </view>
      </comp-model>
    </view>

    <!-- 禁用遮罩点击关闭 -->
    <view class="example-section">
      <view class="section-title">禁用遮罩点击关闭</view>
      <view class="button-row">
        <comp-button theme="primary" @click="showNoMaskClose"
          >显示弹窗</comp-button
        >
      </view>
      <comp-model
        v-model="noMaskCloseVisible"
        title="禁用遮罩点击关闭"
        :closeOnClickMask="false"
      >
        <view class="model-content">
          这个弹窗禁用了点击遮罩关闭的功能，只能通过关闭按钮关闭。
        </view>
      </comp-model>
    </view>

    <!-- 隐藏关闭按钮 -->
    <view class="example-section">
      <view class="section-title">隐藏关闭按钮</view>
      <view class="button-row">
        <comp-button theme="primary" @click="showNoClose">显示弹窗</comp-button>
      </view>
      <comp-model
        v-model="noCloseVisible"
        title="隐藏关闭按钮"
        :showClose="false"
      >
        <view class="model-content">
          这个弹窗隐藏了关闭按钮，只能通过点击遮罩关闭。
          <view class="button-row" style="margin-top: 20rpx">
            <comp-button theme="primary" @click="noCloseVisible = false"
              >关闭弹窗</comp-button
            >
          </view>
        </view>
      </comp-model>
    </view>

    <!-- 自定义头部 -->
    <view class="example-section">
      <view class="section-title">自定义头部</view>
      <view class="button-row">
        <comp-button theme="primary" @click="showCustomHeader"
          >显示弹窗</comp-button
        >
      </view>
      <comp-model v-model="customHeaderVisible">
        <template #header>
          <view class="custom-header">
            <view class="custom-title">自定义头部</view>
            <view class="custom-subtitle">这是一个副标题</view>
          </view>
        </template>
        <view class="model-content">
          这个弹窗使用了自定义头部，可以根据需要定制头部内容。
        </view>
      </comp-model>
    </view>

    <!-- 自定义底部 -->
    <view class="example-section">
      <view class="section-title">自定义底部</view>
      <view class="button-row">
        <comp-button theme="primary" @click="showCustomFooter"
          >显示弹窗</comp-button
        >
      </view>
      <comp-model v-model="customFooterVisible" title="自定义底部">
        <view class="model-content">
          这个弹窗使用了自定义底部，通常用于放置操作按钮。
        </view>
        <template #footer>
          <view class="custom-footer">
            <comp-button theme="default" @click="customFooterVisible = false"
              >取消</comp-button
            >
            <comp-button theme="primary" @click="handleConfirm"
              >确认</comp-button
            >
          </view>
        </template>
      </comp-model>
    </view>

    <!-- 异步关闭 -->
    <view class="example-section">
      <view class="section-title">异步关闭</view>
      <view class="button-row">
        <comp-button theme="primary" @click="showAsync">显示弹窗</comp-button>
      </view>
      <comp-model v-model="asyncVisible" title="异步关闭">
        <view class="model-content">
          点击确认按钮后会有2秒的延迟才关闭弹窗，模拟异步操作。
        </view>
        <template #footer>
          <view class="custom-footer">
            <comp-button theme="default" @click="asyncVisible = false"
              >取消</comp-button
            >
            <comp-button
              theme="primary"
              @click="handleAsyncConfirm"
              :loading="loading"
              >{{ loading ? '处理中...' : '确认' }}</comp-button
            >
          </view>
        </template>
      </comp-model>
    </view>

    <!-- 嵌套弹窗 -->
    <view class="example-section">
      <view class="section-title">嵌套弹窗</view>
      <view class="button-row">
        <comp-button theme="primary" @click="showNested">显示弹窗</comp-button>
      </view>
      <comp-model v-model="nestedVisible" title="第一层弹窗">
        <view class="model-content">
          这是第一层弹窗，点击下面的按钮可以打开第二层弹窗。
          <view class="button-row" style="margin-top: 20rpx">
            <comp-button theme="primary" @click="showNestedInner"
              >打开第二层弹窗</comp-button
            >
          </view>
        </view>
      </comp-model>

      <comp-model v-model="nestedInnerVisible" title="第二层弹窗" size="small">
        <view class="model-content">
          这是第二层弹窗，嵌套在第一层弹窗内。
        </view>
      </comp-model>
    </view>

    <!-- 方法调用 -->
    <view class="example-section">
      <view class="section-title">方法调用</view>
      <view class="button-row">
        <comp-button theme="primary" @click="showByMethod"
          >通过方法显示</comp-button
        >
      </view>
      <comp-model
        ref="methodModel"
        v-model="methodVisible"
        title="方法调用示例"
      >
        <view class="model-content">
          这个弹窗是通过调用组件实例的 open 方法打开的。
        </view>
      </comp-model>
    </view>

    <!-- 事件监听 -->
    <view class="example-section">
      <view class="section-title">事件监听</view>
      <view class="button-row">
        <comp-button theme="primary" @click="showEvents">显示弹窗</comp-button>
      </view>
      <comp-model
        v-model="eventsVisible"
        title="事件监听示例"
        @open="handleOpen"
        @opened="handleOpened"
        @close="handleClose"
        @closed="handleClosed"
      >
        <view class="model-content">
          这个弹窗会在打开和关闭的不同阶段触发事件，查看控制台日志。
        </view>
      </comp-model>
    </view>

    <!-- 事件日志 -->
    <view class="example-section">
      <view class="section-title">事件日志</view>
      <view class="event-log">
        <view>事件日志：</view>
        <view v-for="(log, index) in eventLogs" :key="index" class="log-item">
          {{ log }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import CompButton from '../comp-button/Index.vue';
  import CompModel from './Index.vue';
  import { type ModelPosition, type ModelSize } from './types';

  // 基础弹窗
  const basicVisible = ref(false);
  const showBasic = () => {
    basicVisible.value = true;
  };

  // 不同位置弹窗
  const positionVisible = ref(false);
  const currentPosition = ref<ModelPosition>('center');
  const showPosition = (position: ModelPosition) => {
    currentPosition.value = position;
    positionVisible.value = true;
  };

  // 不同尺寸弹窗
  const sizeVisible = ref(false);
  const currentSize = ref<ModelSize>('medium');
  const showSize = (size: ModelSize) => {
    currentSize.value = size;
    sizeVisible.value = true;
  };

  // 自定义宽高弹窗
  const customSizeVisible = ref(false);
  const showCustomSize = () => {
    customSizeVisible.value = true;
  };

  // 全屏弹窗
  const fullscreenVisible = ref(false);
  const showFullscreen = () => {
    fullscreenVisible.value = true;
  };

  // 禁用遮罩点击关闭弹窗
  const noMaskCloseVisible = ref(false);
  const showNoMaskClose = () => {
    noMaskCloseVisible.value = true;
  };

  // 隐藏关闭按钮弹窗
  const noCloseVisible = ref(false);
  const showNoClose = () => {
    noCloseVisible.value = true;
  };

  // 自定义头部弹窗
  const customHeaderVisible = ref(false);
  const showCustomHeader = () => {
    customHeaderVisible.value = true;
  };

  // 自定义底部弹窗
  const customFooterVisible = ref(false);
  const showCustomFooter = () => {
    customFooterVisible.value = true;
  };
  const handleConfirm = () => {
    customFooterVisible.value = false;
    addEventLog('点击了确认按钮');
  };

  // 异步关闭弹窗
  const asyncVisible = ref(false);
  const loading = ref(false);
  const showAsync = () => {
    asyncVisible.value = true;
  };
  const handleAsyncConfirm = () => {
    loading.value = true;
    addEventLog('开始异步操作');

    setTimeout(() => {
      loading.value = false;
      asyncVisible.value = false;
      addEventLog('异步操作完成，弹窗关闭');
    }, 2000);
  };

  // 嵌套弹窗
  const nestedVisible = ref(false);
  const nestedInnerVisible = ref(false);
  const showNested = () => {
    nestedVisible.value = true;
  };
  const showNestedInner = () => {
    nestedInnerVisible.value = true;
  };

  // 方法调用弹窗
  const methodVisible = ref(false);
  const methodModel = ref<InstanceType<typeof CompModel> | null>(null);
  const showByMethod = () => {
    methodModel.value?.open();
  };

  // 事件监听弹窗
  const eventsVisible = ref(false);
  const showEvents = () => {
    eventsVisible.value = true;
  };

  // 事件处理
  const eventLogs = ref<string[]>([]);

  const addEventLog = (log: string) => {
    const timeLog = `${log}, 时间: ${new Date().toLocaleTimeString()}`;
    eventLogs.value.unshift(timeLog);
    if (eventLogs.value.length > 5) {
      eventLogs.value.pop();
    }
  };

  const handleOpen = () => {
    addEventLog('弹窗开始打开 (open事件)');
  };

  const handleOpened = () => {
    addEventLog('弹窗打开完成 (opened事件)');
  };

  const handleClose = () => {
    addEventLog('弹窗开始关闭 (close事件)');
  };

  const handleClosed = () => {
    addEventLog('弹窗关闭完成 (closed事件)');
  };
</script>

<style scoped>
  .model-example {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
    font-family:
      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
      Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  .example-title {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
  }

  .example-section {
    margin-bottom: 30px;
    padding: 20px;
    border-radius: 8px;
    background-color: #f9f9f9;
  }

  .section-title {
    font-size: 18px;
    margin-bottom: 15px;
    color: #555;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
  }

  .button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
  }

  .model-content {
    padding: 10px 0;
    color: #333;
    line-height: 1.5;
  }

  .event-log {
    margin-top: 15px;
    padding: 10px;
    background-color: #f0f0f0;
    border-radius: 4px;
    font-size: 14px;
  }

  .log-item {
    padding: 5px 0;
    border-bottom: 1px dashed #ddd;
  }

  /* 自定义头部样式 */
  .custom-header {
    padding: 20rpx 0;
    text-align: center;
  }

  .custom-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }

  .custom-subtitle {
    font-size: 24rpx;
    color: #999;
  }

  /* 自定义底部样式 */
  .custom-footer {
    display: flex;
    justify-content: flex-end;
    gap: 20rpx;
  }
</style>
